<template>
  <div class="app-container">
    <div class="tabs-container">
      <div class="left-tabs">
        <div class="top-left">
          <el-tabs class="name-show" type="border-card">
            <el-tab-pane label="用户姓名">当前登录用户为：{{this.username}}</el-tab-pane>
          </el-tabs>
        </div>
        <el-tabs class="name-show" type="border-card">
          <el-tab-pane label="待备案">
            <template #label>
              <span>待备案</span>
              <span v-if="checkNum>0" class="badge">{{checkNum}}</span>
            </template>
            <el-table v-loading="loading" :data="developCheckList" @row-click="getFileInfo" ref="developCheckList">
              <el-table-column type="expand" >
                <template slot-scope="scope">
                  <el-table class="table-expand" :data="scope.row.checkFileInfo">
                    <el-table-column label="待备案文件名" align="center" prop="fileName" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <a @click="handleDownload(scope.row)" style="color:#1E90FF;cursor:pointer">{{ scope.row.fileName}}</a>
                      </template>
                    </el-table-column>
                    <el-table-column label="落款时间" align="center" prop="signatureTime" width="180">
                      <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.signatureTime, '{y}-{m}-{d}') }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="上传时间" align="center" prop="uploadTime" width="180">
                      <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.uploadTime, '{y}-{m}-{d}') }}</span>
                      </template>
                    </el-table-column>
                    <!--      <el-table-column label="所属阶段" align="center" prop="stage" />-->
                    <el-table-column label="所属阶段" align="center" prop="stage">
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.party_develop_stage" :value="scope.row.stage" />
                      </template>
                    </el-table-column>
                    <el-table-column label="备案状态" align="center" prop="checkStatus" >
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.party_develop_check" :value="scope.row.checkStatus" />
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="人员ID" align="center" key="userId" prop="userId" :show-overflow-tooltip="true" v-if="false"/>
              <el-table-column label="姓名" align="center" key="userName" prop="userName"  :show-overflow-tooltip="true" />
              <el-table-column label="性别" align="center" key="sex" prop="sex" :show-overflow-tooltip="true" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
                </template>
              </el-table-column>
              <!--          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />-->
              <el-table-column label="归属支部" align="center" key="deptName" prop="deptName" :show-overflow-tooltip="true" />
              <el-table-column label="检查状态" align="center" key="check_status" prop="check_status" :show-overflow-tooltip="true" />
<!--              <el-table-column label="手机号码" align="center" key="phoneNumber" prop="phoneNumber" />-->
              <el-table-column label="发展阶段" align="center" key="status" prop="status" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.user_party" :value="scope.row.status"/>
                </template>
              </el-table-column>
              <el-table-column label="文档管理" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <router-link :to="'/party/files/index/' + scope.row.userId" class="link-type">
                    <span>查看全部文档</span>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="160"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope" v-if="scope.row.userId !== 1">
                  <!--              <el-button-->
                  <!--                size="mini"-->
                  <!--                type="text"-->
                  <!--                icon="el-icon-edit"-->
                  <!--                @click="handleFile(scope.row)"-->
                  <!--              >文档管理</el-button>-->
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleCheck(scope.row)"

                  >备案</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getCheckList"
            />
          </el-tab-pane>
          <el-tab-pane label="已备案">
            <template #label>
              <span>已备案</span>
              <!--              <span v-if="checkNum>0" class="badge">{{checkNum}}</span>-->
            </template>
            <el-table v-loading="loading" :data="developCheckedList" @row-click="getCheckedFileInfo" ref="developCheckedList">
              <el-table-column type="expand" >
                <template slot-scope="scope">
                  <el-table class="table-expand" :data="scope.row.checkedFileInfo">
                    <el-table-column label="已备案文件名" align="center" prop="fileName" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <a @click="handleDownload(scope.row)" style="color:#1E90FF;cursor:pointer">{{ scope.row.fileName}}</a>
                      </template>
                    </el-table-column>
                    <el-table-column label="落款时间" align="center" prop="signatureTime" width="180">
                      <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.signatureTime, '{y}-{m}-{d}') }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="上传时间" align="center" prop="uploadTime" width="180">
                      <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.uploadTime, '{y}-{m}-{d}') }}</span>
                      </template>
                    </el-table-column>
                    <!--      <el-table-column label="所属阶段" align="center" prop="stage" />-->
                    <el-table-column label="所属阶段" align="center" prop="stage">
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.party_develop_stage" :value="scope.row.stage" />
                      </template>
                    </el-table-column>
                    <el-table-column label="备案状态" align="center" prop="checkStatus" >
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.party_develop_check" :value="scope.row.checkStatus" />
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="人员ID" align="center" key="userId" prop="userId" :show-overflow-tooltip="true" v-if="false"/>
              <el-table-column label="姓名" align="center" key="userName" prop="userName"  :show-overflow-tooltip="true" />
              <el-table-column label="性别" align="center" key="sex" prop="sex" :show-overflow-tooltip="true" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
                </template>
              </el-table-column>
              <!--          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />-->
              <el-table-column label="归属支部" align="center" key="deptName" prop="deptName" :show-overflow-tooltip="true" />
<!--              <el-table-column label="检查状态" align="center" key="check_status" prop="check_status" :show-overflow-tooltip="true" />-->
              <!--              <el-table-column label="手机号码" align="center" key="phoneNumber" prop="phoneNumber" />-->
              <el-table-column label="发展阶段" align="center" key="status" prop="status" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.user_party" :value="scope.row.status"/>
                </template>
              </el-table-column>
<!--              <el-table-column label="文档管理" align="center" :show-overflow-tooltip="true">-->
<!--                <template slot-scope="scope">-->
<!--                  <router-link :to="'/party/files/index/' + scope.row.userId" class="link-type">-->
<!--                    <span>查看全部文档</span>-->
<!--                  </router-link>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                label="操作"-->
<!--                align="center"-->
<!--                width="160"-->
<!--                class-name="small-padding fixed-width"-->
<!--              >-->
<!--                <template slot-scope="scope" v-if="scope.row.userId !== 1">-->
<!--                  <el-button-->
<!--                    size="mini"-->
<!--                    type="text"-->
<!--                    icon="el-icon-edit"-->
<!--                    @click="handleCheck(scope.row)"-->
<!--                    v-hasPermi="['system:user:edit']"-->
<!--                  >审核</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getCheckList"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="right-tabs-container">
        <div class="top-tabs">
          <el-tabs class="name-show" type="border-card">
            <el-tab-pane label="快捷入口">
              <el-row>
                <el-col :span="12" class="icon-container">
                  <div class="shortcut-icon" @click="goToApply">
                    <img
                      src="@/assets/images/iapply.png"
                      class="img-icon"
                    />
                    <span>新增申请</span>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="bottom-tabs">
          <el-tabs class="name-show" type="border-card">
            <el-tab-pane label="通知提醒">通知提醒</el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
  import { listDevelop, getDevelop, delDevelop, addDevelop, updateDevelop,checkStatusList } from "@/api/system/develop";
  import { listFiles, getFiles, delFiles, addFiles, updateFiles,updateCheckStatus } from "@/api/system/files";
    export default {
        name: "index",
      dicts: ['sys_normal_disable', 'sys_user_sex','user_party','party_develop_stage','party_develop_check'],
      data() {
        return {
          username:null,
          // 遮罩层
          loading: false,
          //待审核列表
          developCheckList:null,
          //已审核列表
          developCheckedList:null,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            userName: undefined,
            phonenumber: undefined,
            status: undefined,
            deptId: undefined
          },
          // 总条数
          total: 0,
          //待审核条数
          checkNum: 0,
          httpUrl : process.env.VUE_APP_BASE_API,
        }
      },
      created() {
        this.getUserInfo();
        this.getCheckList();
        this.getCheckedList();
      },
      methods: {
        getUserInfo(){
          // 获取当前用户名
          this.username = this.$store.state.user.name;
        },
        goToApply(){

        },
        async getFileInfo(row){
          var a = {"userId":row.userId,"checkStatus":1}
          await listFiles(a).then(response=>{
            row.checkFileInfo = response.rows
          });
          this.$refs.developCheckList.toggleRowExpansion(row);
        },
        async getCheckedFileInfo(row){
          var a = {"userId":row.userId,"checkStatus":3}
          await listFiles(a).then(response=>{
            row.checkedFileInfo = response.rows
          });
          this.$refs.developCheckedList.toggleRowExpansion(row);
        },
        handleDownload(row) {
          var name = row.fileName;
          var url = this.httpUrl + row.filePath;
          var suffix = url.substring(url.lastIndexOf("."), url.length);

          function downloadFile(url, fileName) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob';
            xhr.addEventListener('load', function () {
              if (xhr.status === 200) {
                const a = document.createElement('a');
                a.href = window.URL.createObjectURL(xhr.response);
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(a.href);
              }
            });
            xhr.addEventListener('progress', function (e) {
              let percent = Math.trunc(e.loaded / e.total * 100);
            })
            // 错误处理
            xhr.addEventListener('error', function (e) {
              // todo
            })
            // 发送请求
            xhr.send();
          }
          downloadFile(url, row.fileName);
        },
        /** 查询用户及发展情况列表 */
        getCheckList() {
          this.queryParams.check_status = 1
          this.loading = true;
          checkStatusList(this.queryParams).then(response => {
            this.checkNum = response.rows.length
            response.rows.forEach(row => {
              row.status = this.getCurrentStage(row);
            });
            this.developCheckList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        },
        getCheckedList() {
          this.queryParams.check_status = 3
          this.loading = true;
          checkStatusList(this.queryParams).then(response => {
            response.rows.forEach(row => {
              row.status = this.getCurrentStage(row);
            });
            this.developCheckedList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        },
        //判断当前所处阶段
        getCurrentStage(row) {
          for (let i = 5; i >= 1; i--) {
            const stageFlagField = `stage${i}Flag`;
            const stageFlag = row[stageFlagField];
            if (stageFlag === 1) {
              return `${i}`;
            }
          }
          return '0';
        },
        //审核操作
        async handleCheck(row){
          var a = {"userId":row.userId,"checkStatus":1}
          await listFiles(a).then(response=>{
            row.checkFileInfo = response.rows
          });
          const latestRecord = row.checkFileInfo
            .reduce((latest, current) => {
              const latestDate = new Date(latest.signatureTime);
              const currentDate = new Date(current.signatureTime);
              return currentDate > latestDate ? current : latest;
            });
          this.$modal.confirm('是否确认通过"' + row.userName + '"的申请？').then(function() {
            //将用户当前阶段时间填充上,目前取当前阶段最后一个文件的时间
            const recordTime = latestRecord.signatureTime
            const stageName = "stage" + (Number(row.status) + 1) + "Flag"
            const stageTime = "stage" + (Number(row.status) + 1) + "FlagTime"
            var a = {"userId":row.userId,[stageName]:1,[stageTime]:recordTime}
            updateDevelop(a)
            //将该用户stage阶段的文件审核状态置为3
            var stages = []
            if(row.status == 0){
              stages.push(Number(row.status)+1);
            }else if(row.status == 5){
              stages.push(2*Number(row.status));
            }else {
              stages.push(2*Number(row.status));
              stages.push(2*Number(row.status)+1);
            }
            // let stages = this.judgeFileStages(row.status)
            var b = {"userId":row.userId,"stages":stages,"checkStatus":3}
            return updateCheckStatus(b);
          }).then(() => {
            this.getCheckList();
            this.getCheckedList();
            this.$modal.msgSuccess("备案成功");
          }).catch(() => {});
        },

        //判断需要修改审核状态的文件阶段
        judgeFileStages(status){
          const stages = []
          if(status == 0){
            stages.push(Number(status)+1);
          }else if(status == 5){
            stages.push(2*Number(status));
          }else {
            stages.push(2*Number(status));
            stages.push(2*Number(status)+1);
          }
          return stages;
        }
      }
    }

</script>

<style scoped>
  .tabs-container{
    display: flex;
    height: 100vh;
  }
  .left-tabs{
    flex:0 0 70%;
    display: flex;
    overflow: auto;
    height: 80%;
    flex-direction: column;
  }
  .top-left{
    flex:0 0 10%;
    display: flex;
    flex-direction: column;
  }
  .name-show{
    flex:1;
    margin-top: 10px;
  }
  .right-tabs-container{
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    height: 80%;
  }
  .top-tabs,
  .bottom-tabs{
    flex: 0 0 auto;

  }
  .top-tabs{
    height: 50%;
    display: flex;
  }
  .bottom-tabs{
    overflow: auto;
    height: 50%;
    display: flex;
  }
  .icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .shortcut-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  .img-icon{
    width:100px;
    height: auto;
    cursor: pointer;
  }

  .shortcut-icon span {
    font-size: 1.2em;
  }

  .el-row {
    margin-bottom: 20px; /* 调整行之间的间距 */
  }
  .badge{
    display: inline-block;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 1px 4px;
    width:18px;
    height:18px;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
  }
</style>
